<template>
  <div class="index-container">
    <div class="index-body">
      <div class="index-menu">
        <icon-button class="index-menu-item" font-class="icon-xiangmu" weight="200"></icon-button>
        <icon-button class="index-menu-item" font-class="icon-yemian"/>
        <icon-button class="index-menu-item" font-class="icon-icon-test"></icon-button>
      </div>
      <div class="index-option">
        <div class="index-open-folder">
          <div class="folder-open" @click="$store.commit('changePagePopupStatus')">
            <icon-button font-class="icon-icon-test" size="12px" padding="0px 18px"
                         color="#5751EF"></icon-button>
            Create Page
          </div>
        </div>
        <div class="index-tree">
          <tree v-for="item in $store.state.treeData" :tree-data="item" @nodeClick="showApiInfo" @addBtn="openApiPopup"></tree>
        </div>
      </div>
      <div class="index-main">
        <router-view></router-view>
      </div>
    </div>
    <IndexPagePopup v-if="$store.state.isShowPagePopup"></IndexPagePopup>
    <IndexApiPopup v-if="$store.state.isShowApiPopup" :page-id="selectedPageId"></IndexApiPopup>
    <div class="index-bottom">bottom</div>
  </div>
</template>

<script>
  import Popup from '../components/common/popup'
  import IconButton from '../components/common/icon-button'
  import Tree from "../components/common/tree-menu";
  import IndexPagePopup from "../components/index/index-page-popup";
  import IndexApiPopup from "../components/index/index-api-popup";

  const PageService = require('../services/PageService');
  const ApiService = require('../services/ApiService');


  export default {
    name: "Index",
    components: {
      Tree,
      IconButton,
      Popup,
      IndexPagePopup,
      IndexApiPopup
    },
    data() {
      return {
        selectedPageId: 0
      }
    },
    async created() {
      let resp = await PageService.getPageData();
      if (resp && resp.data.length > 0) {
        this.$store.state.treeData = resp.data
      }
    },
    methods: {
      jumpToContent: function (id) {
        let node = document.getElementById(id);
        if (node) {
          node.scrollIntoView()
        }
      },
      openApiPopup: function (pageId) {
        this.$store.commit('changeApiPopupStatus');
        this.selectedPageId = pageId.getAttribute('node-id');
      },
      showApiInfo: async function (node) {
        let level = node.getAttribute('level');
        if (level > 1) {
          let apiId = node.getAttribute('node-id');
          // if (!this.$store.state.isShowApiDetail) {
          //   let push = this.$router.push({
          //     path: '/apiDetail',
          //   });
          //   this.$store.state.isShowApiDetail = true;
          // }
          let push = this.$router.push({
            path: `/apiDetail/${apiId}`,
          });
          this.$store.state.isShowApiDetail = true;
          let response = await ApiService.getApiInfo(apiId);
          console.log(response.data);
          this.$store.state.apiDetail = response.data;
        }
      }
    }
  }
</script>
<style scoped>
  .index-container {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .index-body {
    display: flex;
    flex: auto;
    height: 100%;
  }

  .index-menu {
    flex: none;
    height: 100%;
    width: 60px;
    background-color: rgb(44, 44, 44);
  }

  .index-option {
    height: 100%;
    width: 20%;
    min-width: 250px;
    max-width: 400px;
    color: black;
    background-color: #FAF8FD;
    box-shadow: #ddd 0px 0px 2px 0px;
  }

  .index-open-folder {
    padding: 20px 20px;
  }

  .folder-open {
    display: flex;
    width: 100%;
    margin: 5px 0px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    background-color: rgba(240, 235, 239, 0.7);
    color: #5751EF;
    font-weight: 500;
    user-select: none;
  }

  .index-bottom {
    display: flex;
    background-color: #68217A;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 18px;
    font-size: 12px;
    color: white;
    align-items: center;
    justify-content: flex-end;
  }

  .index-menu-item:hover {
    background-color: rgb(66, 66, 66);
  }

  .index-main {
    display: block;
    width: 100%;
    height: 100%;
    overflow: scroll;
    /*padding: 20px;*/
  }
</style>
